@extends('WShop::layout')
@section('content')
    @include('WShop::public.header')
    @component('WShop::public.header')
        @slot('page_title'){{$page_title}} @endslot
    @endcomponent
    <div class="mui-content mui-scroll-wrapper" id="pullrefresh">
        <div class="mui-scroll">
            <div class="mui-table-view mui-table-view-chevron mui-dingdan mui-bottom">
                <div class=" mui-fenlei bg-fff ">
                    <div class=" mui-text-center flex ">
                        <div data-url="{{route('f_Wap_Order_orderRecord')}}" class="flex-item  {{$status===false?'swiper-slide-actives':''}}">全部  </div>
                        <div data-url="{{route('f_Wap_Order_waitPayOrder')}}" class="flex-item {{$status===0?'swiper-slide-actives':''}}">待付款</div>
                        <div data-url="{{route('f_Wap_Order_orderRecord',['status'=>1])}}" class="flex-item {{$status==1?'swiper-slide-actives':''}}">待发货</div>
                        <div data-url="{{route('f_Wap_Order_orderRecord',['status'=>2])}}" class="flex-item {{$status==2?'swiper-slide-actives':''}}">待收货</div>
                        <div data-url="{{route('f_Wap_Order_orderRecord',['status'=>3])}}" class="flex-item {{$status==3?'swiper-slide-actives':''}}">已完成</div>
                    </div>
                </div>

                <div class="mui-zhuda">

                    <div class="mui-dingdan-list">
                        @if($list->isNotEmpty())
                        <ul class="mui-list-unstyled mui-clearfix" id="pull-load">
                            @foreach($list as $item)
                            <li class="bg-fff">
                                <a href="{{route('f_Wap_Order_detailOrder',['order_id'=>$item->order_id])}}">
                                <div class="dingdan-list-header">订单编号：{{$item->order_sn}} <span class="fa fa-angle-right"></span>
                                    @switch($item->status)
                                        @case(0)
                                        <span class="mui-pull-right mui-text-red">待付款</span>
                                        @break
                                        @case(1)
                                        <span class="mui-pull-right mui-text-blue">待发货</span>
                                        @break
                                        @case(2)
                                        <span class="mui-pull-right mui-text-green">待收货</span>
                                        @break
                                        @case(-1)
                                        <span class="mui-pull-right mui-text-red">已关闭</span>
                                        @break
                                        @default
                                        <span class="mui-pull-right mui-text-green">已完成</span>
                                    @endswitch
                                </div>
                                </a>
                                @foreach($item->goods as $goods)
                                <div class="flex">
                                    <img src="{{$goods->goods_img}}" alt="" />
                                    <div class="flex-right" style="width: 100%;">
                                        <div class="flex">
                                            <div class="mui-ellipsis-2">{{$goods->goods_name}}</div>
                                        </div>
                                        <div>
                                            <div style="padding-left: 10px;color: #999;">{{$goods->goods_spec}}</div>
                                            <div style="padding-left: 10px"><span style="margin-right: 50px;">￥{{$goods->pay_money}}</span> x{{$goods->number}}</div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                                <div class="mui-text-right"></div>
                                @switch($item->status)
                                    @case(0)
                                    <div class="mui-text-right1">
                                        <a href="javascript:;"
                                           data-url="{{route('f_Wap_Order_deleteOrder',['order_id'=>$item->order_id])}}"
                                           class="mui-btn quxiao">删除</a>
                                        <a href="{{route('f_Wap_Order_payOrder',['order_id'=>$item->order_id])}}" class="mui-btn">立即付款</a>
                                    </div>
                                    @break
                                    @case(1)
                                    <div class="mui-text-right1"> <a href="javascript:;" class="mui-btn tixing">提醒发货</a></div>
                                    @break
                                    @case(2)
                                    <div class="mui-text-right1"> <a href="javascript:;" data-url="{{route('f_Wap_Order_confirmOrder',['order_id'=>$item->order_id])}}" class="mui-btn shouhuo">确认收货</a></div>
                                    @break
                                @endswitch

                            </li>
                            @endforeach
                        </ul>
                         @else
                            <div style="height: 110px;"></div>
                            <div class="mui-text-center">
                                <img src="{{asset(config('mall.wap_assets1').'/images/empty.png')}}" alt="" width="200">
                                <p style="margin-top: 50px;"><a href="javascript:void(0);" style="color: #fff;border: 1px solid #8a96a2;padding: 8px 24px;border-radius: 16px;background: #8a96a2;">暂无数据</a></p>
                            </div>
                        @endif
                    </div>
                </div>

            </div>
        </div>
    </div>
    @include('WShop::public.foot_bar',['active'=>'user'])
@endsection
@push('scripts')
    <script>
        var btn=$('.mui-fenlei .flex-item')
        for (var i=0;i<btn.length;i++){
            btn[i].addEventListener('tap',function(){
                window.location.href =  $(this).data('url');
            })
        }
        orderOpt();
        function orderOpt() {
            $('.tixing').each(function () {
                this.addEventListener('tap',function () {
                    mui.toast('提醒成功,请耐心等待');
                });
            });

            $('.quxiao').each(function () {
                this.addEventListener('tap',function () {
                    var url = $(this).data('url');
                    mui.confirm('确认删除订单？','',function(e){
                        if(e.index==1){
                            var load =  layer.open({type: 2});
                            $.ajax({
                                type: 'get',
                                url: url,
                            }).done(function (response) {
                                if(response.status){
                                    tooltips(response.msg,6);
                                    setTimeout(function () {
                                        location.href = response.url;
                                    }, 2000);
                                }else{
                                    tooltips(response.msg,5);
                                }
                            }).fail(function (XMLHttpRequest) {
                                if (XMLHttpRequest.status == 422) {
                                    var errors = XMLHttpRequest.responseJSON.errors;
                                    if(typeof errors == 'object') {
                                        for (var index in errors) { // 不推荐这样
                                            tooltips(errors[index][0]);
                                            break;
                                        }
                                    }else{
                                        tooltips(XMLHttpRequest.responseJSON.msg);

                                    }
                                }else{
                                    tooltips('网络异常,请检查连接');
                                }

                            }).always(function () {
                                layer.close(load);
                            });

                            function tooltips(msg) {
                                mui.toast(msg);
                            }
                        }
                    })
                });
            });

            $('.shouhuo').each(function () {
                this.addEventListener('tap',function () {
                    var url = $(this).data('url');
                    mui.confirm('确认收到商品了吗？','',function(e){
                        if(e.index==1){
                            var load =  layer.open({type: 2});
                            $.ajax({
                                type: 'get',
                                url: url,
                            }).done(function (response) {
                                if(response.status){
                                    tooltips(response.msg,6);
                                    setTimeout(function () {
                                        location.href = response.url;
                                    }, 2000);
                                }else{
                                    tooltips(response.msg,5);
                                }
                            }).fail(function (XMLHttpRequest) {
                                if (XMLHttpRequest.status == 422) {
                                    var errors = XMLHttpRequest.responseJSON.errors;
                                    if(typeof errors == 'object') {
                                        for (var index in errors) { // 不推荐这样
                                            tooltips(errors[index][0]);
                                            break;
                                        }
                                    }else{
                                        tooltips(XMLHttpRequest.responseJSON.msg);

                                    }
                                }else{
                                    tooltips('网络异常,请检查连接');
                                }

                            }).always(function () {
                                layer.close(load);
                            });

                            function tooltips(msg) {
                                mui.toast(msg);
                            }
                        }
                    })
                });
            });
        }

    </script>
    <script src="{{asset(config('view.plugin').'/other/day.js')}}"></script>
    <script src="{{asset(config('view.frontend.wap_login').'/js/pull-loading.js')}}"></script>
    <script>
        pullLoading.tpl = '<li class="bg-fff">\n' +
            '<div class="dingdan-list-header">订单编号：{%order_sn%} <span class="fa fa-angle-right"></span> <span class="mui-pull-right mui-text-{%color%}">{%status_text%}</span></div>' +
            '{%goods_item%}<div class="mui-text-right"></div>\n' +
            '<div class="mui-text-right1">{%opt_btn%}</div>\n' +
            '</li>';

        pullLoading.load(function (data) {
            var goodsItemTpl = '<div class="flex"><img src="{%goods_img%}" alt="" />' +
                '<div class="flex-right" style="width: 100%;">' +
                '<div class="flex"><div class="mui-ellipsis-2">{%goods_name%}</div></div>\n' +
                '<div><div style="padding-left: 10px;color: #999;">{%goods_spec%}</div>\n' +
                '<div style="padding-left: 10px"><span style="margin-right: 50px;">￥{%goods_price%}</span> x{%goods_number%}</div>\n' +
                '</div></div></div>';
            var statusText = {
                        "-1":{"text":"已取消","color":"red"},
                        "0":{"text":"代付款","color":"red"},
                        "1":{"text":"待发货","color":"blue"},
                        "2":{"text":"待确认","color":"green"},
                        "3":{"text":"已完成","color":"green"}
                };
            var len = data.length;
            for (var i=0; i<len; i++){
                var opt_btn = '';
                switch (data[i]['status']) {
                    case 0:
                        opt_btn = '  <a href="javascript:;" data-url="{{route('f_Wap_Order_deleteOrder',['order_id'=>-100])}}" class="mui-btn quxiao">删除</a>' +
                            '       <a href="{{route('f_Wap_Order_payOrder',['order_id'=>-100])}}" class="mui-btn">立即付款</a>';
                        break;
                    case 1:
                        opt_btn = '<a href="javascript:;" class="mui-btn tixing">提醒发货</a>';
                        break;
                    case 2:
                        opt_btn = '<a href="javascript:;" data-url="{{route('f_Wap_Order_confirmOrder',['order_id'=>-100])}}" class="mui-btn shouhuo">确认收货</a>';
                        break;
                }
                opt_btn = opt_btn.replace(/-100/g,data[i]['order_id']);
                console.log(opt_btn,data[i]['order_id']);
                var goods = data[i]['goods'];
                var lenG = goods.length;
                var goodsItem = '';
                for (var j=0; j<lenG; j++){
                    goodsItem += goodsItemTpl.replace('{%goods_img%}',goods[j]['goods_img'])
                        .replace('{%goods_name%}',goods[j]['goods_name'])
                        .replace('{%goods_spec%}',goods[j]['goods_spec'])
                        .replace('{%goods_price%}',goods[j]['pay_money'])
                        .replace('{%goods_number%}',goods[j]['number']);
                }

                var itemTpl =pullLoading.tpl;

                itemTpl = itemTpl.replace('{%order_sn%}',data[i]['order_sn'])
                    .replace('{%status_text%}',statusText[data[i]['status']]['text'])
                    .replace('{%color%}',statusText[data[i]['status']]['color'])
                    .replace('{%goods_item%}',goodsItem)
                    .replace('{%opt_btn%}',opt_btn);
                $("#pull-load").append(itemTpl);
                orderOpt();
            }
        })
    </script>
@endpush